.primary {
    background-color: var(--md-sys-color-primary);
}

.primary-text {
    color: var(--md-sys-color-primary);
}

.on-primary {
    background-color: var(--md-sys-color-on-primary);
}

.on-primary-text {
    color: var(--md-sys-color-on-primary);
}

.primary-container {
    background-color: var(--md-sys-color-primary-container);
}

.primary-container-text {
    color: var(--md-sys-color-primary-container);
}

.on-primary-container {
    background-color: var(--md-sys-color-on-primary-container);
}

.on-primary-container-text {
    color: var(--md-sys-color-on-primary-container);
}

.secondary {
    background-color: var(--md-sys-color-secondary);
}

.secondary-text {
    color: var(--md-sys-color-secondary);
}

.on-secondary {
    background-color: var(--md-sys-color-on-secondary);
}

.on-secondary-text {
    color: var(--md-sys-color-on-secondary);
}

.secondary-container {
    background-color: var(--md-sys-color-secondary-container);
}

.secondary-container-text {
    color: var(--md-sys-color-secondary-container);
}

.on-secondary-container {
    background-color: var(--md-sys-color-on-secondary-container);
}

.on-secondary-container-text {
    color: var(--md-sys-color-on-secondary-container);
}

.tertiary {
    background-color: var(--md-sys-color-tertiary);
}

.tertiary-text {
    color: var(--md-sys-color-tertiary);
}

.on-tertiary {
    background-color: var(--md-sys-color-on-tertiary);
}

.on-tertiary-text {
    color: var(--md-sys-color-on-tertiary);
}

.tertiary-container {
    background-color: var(--md-sys-color-tertiary-container);
}

.tertiary-container-text {
    color: var(--md-sys-color-tertiary-container);
}

.on-tertiary-container {
    background-color: var(--md-sys-color-on-tertiary-container);
}

.on-tertiary-container-text {
    color: var(--md-sys-color-on-tertiary-container);
}

.error {
    background-color: var(--md-sys-color-error);
}

.error-text {
    color: var(--md-sys-color-error);
}

.error-container {
    background-color: var(--md-sys-color-error-container);
}

.error-container-text {
    color: var(--md-sys-color-error-container);
}

.on-error {
    background-color: var(--md-sys-color-on-error);
}

.on-error-text {
    color: var(--md-sys-color-on-error);
}

.on-error-container {
    background-color: var(--md-sys-color-on-error-container);
}

.on-error-container-text {
    color: var(--md-sys-color-on-error-container);
}

.background {
    background-color: var(--md-sys-color-background);
}

.background-text {
    color: var(--md-sys-color-background);
}

.on-background {
    background-color: var(--md-sys-color-on-background);
}

.on-background-text {
    color: var(--md-sys-color-on-background) !important;
}

.surface {
    background-color: var(--md-sys-color-surface);
}

.surface-text {
    color: var(--md-sys-color-surface);
}

.on-surface {
    background-color: var(--md-sys-color-on-surface);
}

.on-surface-text {
    color: var(--md-sys-color-on-surface) !important;
}

.surface-variant {
    background-color: var(--md-sys-color-surface-variant);
}

.surface-variant-text {
    color: var(--md-sys-color-surface-variant);
}

.on-surface-variant {
    background-color: var(--md-sys-color-on-surface-variant);
}

.on-surface-variant-text {
    color: var(--md-sys-color-on-surface-variant);
}

.outline {
    background-color: var(--md-sys-color-outline);
}

.outline-text {
    color: var(--md-sys-color-outline);
}

.inverse-on-surface {
    background-color: var(--md-sys-color-inverse-on-surface);
}

.inverse-on-surface-text {
    color: var(--md-sys-color-inverse-on-surface);
}

.inverse-surface {
    background-color: var(--md-sys-color-inverse-surface);
}

.inverse-surface-text {
    color: var(--md-sys-color-inverse-surface);
}

.inverse-primary {
    background-color: var(--md-sys-color-inverse-primary);
}

.inverse-primary-text {
    color: var(--md-sys-color-inverse-primary);
}

.shadow {
    background-color: var(--md-sys-color-shadow);
}

.shadow-text {
    color: var(--md-sys-color-shadow);
}

.surface-tint {
    background-color: var(--md-sys-color-surface-tint);
}

.surface-tint-text {
    color: var(--md-sys-color-surface-tint);
}

.outline-variant {
    background-color: var(--md-sys-color-outline-variant);
}

.outline-variant-text {
    color: var(--md-sys-color-outline-variant);
}

.scrim {
    background-color: var(--md-sys-color-scrim);
}

.scrim-text {
    color: var(--md-sys-color-scrim);
}

:root {
    /* display - large */
    --md-sys-typescale-display-large-font-family-name: Roboto;
    --md-sys-typescale-display-large-font-family-style: Regular;
    --md-sys-typescale-display-large-font-weight: 600;
    --md-sys-typescale-display-large-font-size: 57px;
    --md-sys-typescale-display-large-line-height: 64px;
    --md-sys-typescale-display-large-letter-spacing: -0.25px;
    /* display - medium */
    --md-sys-typescale-display-medium-font-family-name: Roboto;
    --md-sys-typescale-display-medium-font-family-style: Regular;
    --md-sys-typescale-display-medium-font-weight: 400;
    --md-sys-typescale-display-medium-font-size: 45px;
    --md-sys-typescale-display-medium-line-height: 52px;
    --md-sys-typescale-display-medium-letter-spacing: 0px;
    /* display - small */
    --md-sys-typescale-display-small-font-family-name: Roboto;
    --md-sys-typescale-display-small-font-family-style: Regular;
    --md-sys-typescale-display-small-font-weight: 400;
    --md-sys-typescale-display-small-font-size: 36px;
    --md-sys-typescale-display-small-line-height: 44px;
    --md-sys-typescale-display-small-letter-spacing: 0px;
    /* headline - large */
    --md-sys-typescale-headline-large-font-family-name: Roboto;
    --md-sys-typescale-headline-large-font-family-style: Regular;
    --md-sys-typescale-headline-large-font-weight: 500;
    --md-sys-typescale-headline-large-font-size: 32px;
    --md-sys-typescale-headline-large-line-height: 40px;
    --md-sys-typescale-headline-large-letter-spacing: 0px;
    /* headline - medium */
    --md-sys-typescale-headline-medium-font-family-name: Roboto;
    --md-sys-typescale-headline-medium-font-family-style: Regular;
    --md-sys-typescale-headline-medium-font-weight: 400;
    --md-sys-typescale-headline-medium-font-size: 28px;
    --md-sys-typescale-headline-medium-line-height: 36px;
    --md-sys-typescale-headline-medium-letter-spacing: 0px;
    /* headline - small */
    --md-sys-typescale-headline-small-font-family-name: Roboto;
    --md-sys-typescale-headline-small-font-family-style: Regular;
    --md-sys-typescale-headline-small-font-weight: 400;
    --md-sys-typescale-headline-small-font-size: 24px;
    --md-sys-typescale-headline-small-line-height: 32px;
    --md-sys-typescale-headline-small-letter-spacing: 0px;
    /* body - large */
    --md-sys-typescale-body-large-font-family-name: Roboto;
    --md-sys-typescale-body-large-font-family-style: Regular;
    --md-sys-typescale-body-large-font-weight: 400;
    --md-sys-typescale-body-large-font-size: 16px;
    --md-sys-typescale-body-large-line-height: 24px;
    --md-sys-typescale-body-large-letter-spacing: 0.50px;
    /* body - medium */
    --md-sys-typescale-body-medium-font-family-name: Roboto;
    --md-sys-typescale-body-medium-font-family-style: Regular;
    --md-sys-typescale-body-medium-font-weight: 400;
    --md-sys-typescale-body-medium-font-size: 14px;
    --md-sys-typescale-body-medium-line-height: 20px;
    --md-sys-typescale-body-medium-letter-spacing: 0.25px;
    /* body - small */
    --md-sys-typescale-body-small-font-family-name: Roboto;
    --md-sys-typescale-body-small-font-family-style: Regular;
    --md-sys-typescale-body-small-font-weight: 400;
    --md-sys-typescale-body-small-font-size: 12px;
    --md-sys-typescale-body-small-line-height: 16px;
    --md-sys-typescale-body-small-letter-spacing: 0.40px;
    /* label - large */
    --md-sys-typescale-label-large-font-family-name: Roboto;
    --md-sys-typescale-label-large-font-family-style: Medium;
    --md-sys-typescale-label-large-font-weight: 400;
    --md-sys-typescale-label-large-font-size: 14px;
    --md-sys-typescale-label-large-line-height: 20px;
    --md-sys-typescale-label-large-letter-spacing: 0.10px;
    /* label - medium */
    --md-sys-typescale-label-medium-font-family-name: Roboto;
    --md-sys-typescale-label-medium-font-family-style: Medium;
    --md-sys-typescale-label-medium-font-weight: 500;
    --md-sys-typescale-label-medium-font-size: 12px;
    --md-sys-typescale-label-medium-line-height: 16px;
    --md-sys-typescale-label-medium-letter-spacing: 0.50px;
    /* label - small */
    --md-sys-typescale-label-small-font-family-name: Roboto;
    --md-sys-typescale-label-small-font-family-style: Medium;
    --md-sys-typescale-label-small-font-weight: 500;
    --md-sys-typescale-label-small-font-size: 11px;
    --md-sys-typescale-label-small-line-height: 16px;
    --md-sys-typescale-label-small-letter-spacing: 0.50px;
    /* title - large */
    --md-sys-typescale-title-large-font-family-name: Roboto;
    --md-sys-typescale-title-large-font-family-style: Regular;
    --md-sys-typescale-title-large-font-weight: 700;
    --md-sys-typescale-title-large-font-size: 22px;
    --md-sys-typescale-title-large-line-height: 29px;
    --md-sys-typescale-title-large-letter-spacing: 0px;
    /* title - medium */
    --md-sys-typescale-title-medium-font-family-name: Roboto;
    --md-sys-typescale-title-medium-font-family-style: Medium;
    --md-sys-typescale-title-medium-font-weight: 700;
    --md-sys-typescale-title-medium-font-size: 16px;
    --md-sys-typescale-title-medium-line-height: 24px;
    --md-sys-typescale-title-medium-letter-spacing: 0.15px;
    /* title - small */
    --md-sys-typescale-title-small-font-family-name: Roboto;
    --md-sys-typescale-title-small-font-family-style: Medium;
    --md-sys-typescale-title-small-font-weight: 500;
    --md-sys-typescale-title-small-font-size: 14px;
    --md-sys-typescale-title-small-line-height: 20px;
    --md-sys-typescale-title-small-letter-spacing: 0.10px;
}

.display-large{
  font-style: var(--md-sys-typescale-display-large-font-family-style);
  font-weight: var(--md-sys-typescale-display-large-font-weight);
  font-size: var(--md-sys-typescale-display-large-font-size);
  letter-spacing: var(--md-sys-typescale-display-large-letter-spacing);
  line-height: var(--md-sys-typescale-display-large-line-height);
  text-transform: var(--md-sys-typescale-display-large-text-transform);
  text-decoration: var(--md-sys-typescale-display-large-text-decoration);
}
.display-medium{
  font-style: var(--md-sys-typescale-display-medium-font-family-style);
  font-weight: var(--md-sys-typescale-display-medium-font-weight);
  font-size: var(--md-sys-typescale-display-medium-font-size);
  letter-spacing: var(--md-sys-typescale-display-medium-letter-spacing);
  line-height: var(--md-sys-typescale-display-medium-line-height);
  text-transform: var(--md-sys-typescale-display-medium-text-transform);
  text-decoration: var(--md-sys-typescale-display-medium-text-decoration);
}
.display-small{
  font-style: var(--md-sys-typescale-display-small-font-family-style);
  font-weight: var(--md-sys-typescale-display-small-font-weight);
  font-size: var(--md-sys-typescale-display-small-font-size);
  letter-spacing: var(--md-sys-typescale-display-small-letter-spacing);
  line-height: var(--md-sys-typescale-display-small-line-height);
  text-transform: var(--md-sys-typescale-display-small-text-transform);
  text-decoration: var(--md-sys-typescale-display-small-text-decoration);
}
.headline-large{
  font-style: var(--md-sys-typescale-headline-large-font-family-style);
  font-weight: var(--md-sys-typescale-headline-large-font-weight);
  font-size: var(--md-sys-typescale-headline-large-font-size);
  letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
  line-height: var(--md-sys-typescale-headline-large-line-height);
  text-transform: var(--md-sys-typescale-headline-large-text-transform);
  text-decoration: var(--md-sys-typescale-headline-large-text-decoration);
}
.headline-medium{
  font-style: var(--md-sys-typescale-headline-medium-font-family-style);
  font-weight: var(--md-sys-typescale-headline-medium-font-weight);
  font-size: var(--md-sys-typescale-headline-medium-font-size);
  letter-spacing: var(--md-sys-typescale-headline-medium-letter-spacing);
  line-height: var(--md-sys-typescale-headline-medium-line-height);
  text-transform: var(--md-sys-typescale-headline-medium-text-transform);
  text-decoration: var(--md-sys-typescale-headline-medium-text-decoration);
}
.headline-small{
  font-style: var(--md-sys-typescale-headline-small-font-family-style);
  font-weight: var(--md-sys-typescale-headline-small-font-weight);
  font-size: var(--md-sys-typescale-headline-small-font-size);
  letter-spacing: var(--md-sys-typescale-headline-small-letter-spacing);
  line-height: var(--md-sys-typescale-headline-small-line-height);
  text-transform: var(--md-sys-typescale-headline-small-text-transform);
  text-decoration: var(--md-sys-typescale-headline-small-text-decoration);
}
.body-large{
  font-style: var(--md-sys-typescale-body-large-font-family-style);
  font-weight: var(--md-sys-typescale-body-large-font-weight);
  font-size: var(--md-sys-typescale-body-large-font-size);
  letter-spacing: var(--md-sys-typescale-body-large-letter-spacing);
  line-height: var(--md-sys-typescale-body-large-line-height);
  text-transform: var(--md-sys-typescale-body-large-text-transform);
  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
}
.body-medium{
  font-style: var(--md-sys-typescale-body-medium-font-family-style);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
  line-height: var(--md-sys-typescale-body-medium-line-height);
  text-transform: var(--md-sys-typescale-body-medium-text-transform);
  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
}
.body-small{
  font-style: var(--md-sys-typescale-body-small-font-family-style);
  font-weight: var(--md-sys-typescale-body-small-font-weight);
  font-size: var(--md-sys-typescale-body-small-font-size);
  letter-spacing: var(--md-sys-typescale-body-small-letter-spacing);
  line-height: var(--md-sys-typescale-body-small-line-height);
  text-transform: var(--md-sys-typescale-body-small-text-transform);
  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
}
.label-large{
  font-style: var(--md-sys-typescale-label-large-font-family-style);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  font-size: var(--md-sys-typescale-label-large-font-size);
  letter-spacing: var(--md-sys-typescale-label-large-letter-spacing);
  line-height: var(--md-sys-typescale-label-large-line-height);
  text-transform: var(--md-sys-typescale-label-large-text-transform);
  text-decoration: var(--md-sys-typescale-label-large-text-decoration);
}
.label-medium{
  font-style: var(--md-sys-typescale-label-medium-font-family-style);
  font-weight: var(--md-sys-typescale-label-medium-font-weight);
  font-size: var(--md-sys-typescale-label-medium-font-size);
  letter-spacing: var(--md-sys-typescale-label-medium-letter-spacing);
  line-height: var(--md-sys-typescale-label-medium-line-height);
  text-transform: var(--md-sys-typescale-label-medium-text-transform);
  text-decoration: var(--md-sys-typescale-label-medium-text-decoration);
}
.label-small{
  font-style: var(--md-sys-typescale-label-small-font-family-style);
  font-weight: var(--md-sys-typescale-label-small-font-weight);
  font-size: var(--md-sys-typescale-label-small-font-size);
  letter-spacing: var(--md-sys-typescale-label-small-letter-spacing);
  line-height: var(--md-sys-typescale-label-small-line-height);
  text-transform: var(--md-sys-typescale-label-small-text-transform);
  text-decoration: var(--md-sys-typescale-label-small-text-decoration);
}
.title-large{
  font-style: var(--md-sys-typescale-title-large-font-family-style);
  font-weight: var(--md-sys-typescale-title-large-font-weight);
  font-size: var(--md-sys-typescale-title-large-font-size);
  letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
  line-height: var(--md-sys-typescale-title-large-line-height);
  text-transform: var(--md-sys-typescale-title-large-text-transform);
  text-decoration: var(--md-sys-typescale-title-large-text-decoration);
}
.title-medium{
  font-style: var(--md-sys-typescale-title-medium-font-family-style);
  font-weight: var(--md-sys-typescale-title-medium-font-weight);
  font-size: var(--md-sys-typescale-title-medium-font-size);
  letter-spacing: var(--md-sys-typescale-title-medium-letter-spacing);
  line-height: var(--md-sys-typescale-title-medium-line-height);
  text-transform: var(--md-sys-typescale-title-medium-text-transform);
  text-decoration: var(--md-sys-typescale-title-medium-text-decoration);
}
.title-small{
  font-style: var(--md-sys-typescale-title-small-font-family-style);
  font-weight: var(--md-sys-typescale-title-small-font-weight);
  font-size: var(--md-sys-typescale-title-small-font-size);
  letter-spacing: var(--md-sys-typescale-title-small-letter-spacing);
  line-height: var(--md-sys-typescale-title-small-line-height);
  text-transform: var(--md-sys-typescale-title-small-text-transform);
  text-decoration: var(--md-sys-typescale-title-small-text-decoration);
}

/*错误提示*/
#blazor-error-ui {
    background-color: transparent;
    box-shadow: none;
}

    #blazor-error-ui .background-card {
        width: calc(100%);
        height: calc(100%);
        position: fixed;
        background-color: rgba(0,0,0,.5);
        top: 0;
        left: 0;
    }

    #blazor-error-ui .main-card {
        background-color: var( --md-sys-color-error-container);
        color: var(--md-sys-color-on-error-container) !important;
        position: fixed;
        top: 50%;
        bottom: 50%;
        left: 50%;
        right: 50%;
        transform: translate(-50%, -50%);
        width: 400px;
        height: 400px;
        border-radius: var( --md-card-border-radius);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        justify-content: space-between;
    }

    #blazor-error-ui .content-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
/*重连*/
.components-reconnect-show {
    height: 1rem;
    width: 1rem;
    background-color: var(--md-sys-color-on-background);
    position: fixed;
    top: 0;
    z-index: 200;
}
/*错误提示*/
#app-laoding {
    width: 100%;
    display: flex;
    position: fixed;
    height: 100%;
    justify-content: center;
    align-items: center;
}

    #app-laoding .main-card {
        width: 500px;
        border-radius: var( --md-card-border-radius);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        justify-content: space-between;
        max-width: 100%;
        gap: .5rem;
        height: min-content;
        margin: 1rem;
    }

    #app-laoding .content-card {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    /*wasm加载进度条*/
    #app-laoding .loading-progress {
        position: relative;
        display: block;
        width: 6rem;
        height: 6rem;
    }

        #app-laoding .loading-progress circle {
            fill: none;
            stroke-width: 0.3rem;
            transform-origin: 50% 50%;
            transform: rotate(-90deg);
        }

            #app-laoding .loading-progress circle:last-child {
                stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
                transition: stroke-dasharray 0.05s ease-in-out;
            }

    #app-laoding .loading-progress-text {
        position: absolute;
        font-weight: bold;
    }

        #app-laoding .loading-progress-text:after {
            content: var(--blazor-load-percentage-text, "Loading");
        }

    #app-laoding .beian {
        position: fixed;
        bottom: 10px;
        left: 50%;
        right: 50%;
        width: max-content;
        padding: 0 1rem;
        border-radius: 10px;
        transform: translate(-50%,0);
    }

@media (prefers-color-scheme: light) or (prefers-color-scheme: no-preference) {
    #app-laoding .main-card, #app-laoding .beian {
        background-color: #ffd9de;
        color: #400014 !important;
    }

    .loading-progress circle {
        stroke: #ffffff;
    }

        .loading-progress circle:last-child {
            stroke: #bc004b;
        }

    .loading-progress-text {
        color: #bc004b;
    }

    #app-laoding {
        background-color: #fffbff;
    }
}

@media(prefers-color-scheme: dark) {
    #app-laoding .main-card, #app-laoding .beian {
        background-color: #900038;
        color: #ffd9de !important;
    }

    .loading-progress circle {
        stroke: #660025;
    }

        .loading-progress circle:last-child {
            stroke: #ffb2be;
        }

    .loading-progress-text {
        color: #ffb2be;
    }

    #app-laoding {
        background-color: #201a1b;
    }
}

/*参数*/
:root {
    --md-card-border-radius: 12px;
    --md-card-active-border-radius: 24px;
}

:root {
    --md-sys-color-surface-1: rgb(var(--md-sys-color-primary-rgb) / 0.05);
    --md-sys-color-surface-2: rgb(var(--md-sys-color-primary-rgb) / 0.08);
    --md-sys-color-surface-3: rgb(var(--md-sys-color-primary-rgb) / 0.11);
    --md-sys-color-surface-4: rgb(var(--md-sys-color-primary-rgb) / 0.12);
    --md-sys-color-surface-5: rgb(var(--md-sys-color-primary-rgb) / 0.14);
}

/*全局*/
body {
    /*     font-family: 'Noto Sans SC', sans-serif;
 */
    font-family: "Google Sans Text",sans-serif;
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
}

.w-100 {
    width: 100% !important;
}

.h-100 {
    height: 100% !important;
}


/*固定行数*/
.text-truncate-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.text-truncate-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.text-truncate-3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.text-truncate-4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.text-truncate-5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.text-truncate-6 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    word-break: break-all;
}


/*scrollbar*/
::-webkit-scrollbar-track {
    border-radius: 15px;
    margin: 5px 0;
}

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    margin: 5px 0;
}

::-webkit-scrollbar-thumb {
    margin: 5px 0;
    border-radius: 15px;
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(170 168 168)), color-stop(0.72, rgb(170 168 168)), color-stop(0.86, rgb(170 168 168)));
}
/*视觉反馈*/
a:focus-visible {
    outline: thin dotted;
}

code {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
}

/*旋转*/
@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.icon-rotate {
    -webkit-transform: rotate(360deg);
    animation: rotation 1s linear infinite;
    -moz-animation: rotation 1s linear infinite;
    -webkit-animation: rotation 1s linear infinite;
    -o-animation: rotation 1s linear infinite;
}

/*删除与新增*/
del {
    text-decoration: none;
    color: #b30000;
    text-decoration: line-through;
    background: #fadad7;
}

ins {
    background: #eaf2c2;
    color: #406619;
    text-decoration: none;
}

/*字体*/
.fw-bold {
    font-weight: bold;
}

/*幻灯片组*/
.slide-group-garp .m-slide-group__content {
    gap: 1rem;
    padding: 3px;
}

/*页面内容距离顶部*/
.variable.container {
    padding-top: 24px;
}

/*输入框*/
input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: var(--md-sys-color-on-background);
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: var(--md-sys-color-on-background);
}

/*鼠标悬停样式*/
.pointer {
    cursor: pointer !important;
}


/*去掉下划线*/
a {
    text-decoration: none;
}

/*黑白*/
/*
html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid: DXImageTransform. Microsoft. BasicImage(grayscale=1);
    filter: gray;
}*/

/*修正Masa样式的影响*/
.m-application {
    font-family: inherit !important;
}

.theme--light.m-application {
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
}

.row {
    margin-bottom: 0px;
    margin-top: 0;
}

.col-xl, .col-xl-auto, .col-xl-12, .col-xl-11, .col-xl-10, .col-xl-9, .col-xl-8, .col-xl-7, .col-xl-6, .col-xl-5, .col-xl-4, .col-xl-3, .col-xl-2, .col-xl-1, .col-lg, .col-lg-auto, .col-lg-12, .col-lg-11, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-lg-2, .col-lg-1, .col-md, .col-md-auto, .col-md-12, .col-md-11, .col-md-10, .col-md-9, .col-md-8, .col-md-7, .col-md-6, .col-md-5, .col-md-4, .col-md-3, .col-md-2, .col-md-1, .col-sm, .col-sm-auto, .col-sm-12, .col-sm-11, .col-sm-10, .col-sm-9, .col-sm-8, .col-sm-7, .col-sm-6, .col-sm-5, .col-sm-4, .col-sm-3, .col-sm-2, .col-sm-1, .col, .col-auto, .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
    padding-bottom: 0;
    padding-top: 0;
}

.theme--light.m-application code {
    background-color: transparent;
}

.m-card__title {
    font-weight: bold;
}

.theme--dark.m-application code {
    background-color: transparent;
    text-shadow: none;
}

.theme--light.m-application {
    background-color: transparent;
}

.m-toast-detail {
    white-space: pre-line;
}

.m-rating .m-icon {
    padding: 0.1rem;
}

.theme--light.m-tabs > .m-tabs-bar {
    background-color: transparent;
}

.theme--light.m-tabs-items {
    background-color: transparent;
}

/*页脚*/
.img-fluid {
    width: 100%;
}

/*步骤条*/
.m-stepper__wrapper.active {
    height: auto !important;
}
/*Toast*/
.m-enqueued-snackbars .error {
    height: unset !important;
}

.m-snack__content > div {
    white-space: pre-line;
}

.nav-loading .m-snack__content > div {
    white-space: normal !important;
}
/*页面跳转Alert*/
.nav-loading .m-snack__content {
    padding: 0;
}
/*Masa卡片*/
.theme--light.m-card {
    background-color: transparent;
    color: inherit;
}

    .theme--light.m-card > .m-card__subtitle, .theme--light.m-card > .m-card__text, .m-toast-detail {
        color: inherit
    }

.m-alert:not(.m-sheet--tile) {
    border-radius: var( --md-card-border-radius);
}

.m-sheet.m-card, .m-dialog, .m-menu__content {
    border-radius: var(--md-card-border-radius);
}

.m-tabs {
    border-radius: var(--md-card-border-radius) !important;
}
/*下拉列表*/
.m-sheet.theme--light.m-list.m-select-list {
    background-color: var(--md-sys-color-background);
}
/*步骤条*/
.m-stepper.theme--light.m-card, .m-stepper.theme--light.m-sheet {
    background: transparent;
}
/*对话框*/
.m-dialog, .m-snack__wrapper.m-sheet.theme--light {
    background-color: var(--md-sys-color-background);
}
/*Markdown*/
.markdown-body h1, .markdown-body h2 {
    border-bottom: 2px solid var(--md-sys-color-primary) !important;
}

.markdown-body blockquote {
    color: var(--md-sys-color-secondary) !important;
    border-left: .25em solid var(--md-sys-color-secondary) !important;
    display: flex;
    flex-direction: column;
}

.markdown-body hr {
    height: .1em !important;
    background-color: var(--md-sys-color-primary) !important;
}

.markdown-body li > p {
    margin-top: 0 !important;
    margin-bottom: 0;
}

.markdown-body ol, .markdown-body ul {
    display: flex;
    flex-direction: column;
}

/*输入框*/
.m-text-field input {
    line-height: unset;
}
/*卡片标题字体*/
.m-application .text-h5, .m-application .text-h6 {
    font-family: inherit !important;
}
/*警告条*/
.tertiary--text {
    color: var(--md-sys-color-tertiary) !important;
}
/*默认字体颜色*/
.theme--light.m-expansion-panels .m-expansion-panel-header .m-expansion-panel-header__icon .m-icon, .theme--light.m-tabs > .m-tabs-bar .m-tab--disabled, .theme--light.m-tabs > .m-tabs-bar .m-tab:not(.m-tab--active), .theme--light.m-tabs > .m-tabs-bar .m-tab:not(.m-tab--active) > .m-btn, .theme--light.m-tabs > .m-tabs-bar .m-tab:not(.m-tab--active) > .m-icon {
    color: var(--md-sys-color-secondary);
}

.theme--light.m-label {
    color: inherit;
}

.theme--light.m-input, .theme--light.m-input input, .theme--light.m-input textarea {
    color: var(--md-sys-color-on-background) !important;
}

.theme--light.m-select .m-select__selections {
    color: inherit;
}

.theme--light.m-list-item:not(.m-list-item--active):not(.m-list-item--disabled) {
    color: var(--md-sys-color-on-background);
}

.theme--light.m-icon {
    color: var(--md-sys-color-secondary);
}

.m-chip:not(.m-chip--outlined).primary {
    color: var(--md-sys-color-on-primary)
}

.m-btn:not(.m-btn--outlined).primary {
    color: var(--md-sys-color-on-primary)
}
/*边框颜色*/
.theme--light.m-text-field > .m-input__control > .m-input__slot:before {
    border-color: inherit;
}

.theme--light.m-text-field:not(.m-input--has-state):hover > .m-input__control > .m-input__slot:before {
    border-color: inherit;
}
/*表格*/
.theme--light.m-data-table {
    background-color: inherit;
    color: inherit;
    border-radius: var(--md-card-border-radius) !important;
}

.theme--light.m-toolbar.m-sheet {
    background-color: inherit;
}

.m-data-table .m-toolbar__content, .m-tabs {
    border-radius: var(--md-card-border-radius) !important;
}

.theme--light.m-data-table > .m-data-table__wrapper > table > thead > tr > th {
    color: inherit;
}

.theme--light.m-data-table .m-data-table-header th.sortable.active, .theme--light.m-data-table .m-data-table-header th.sortable.active .m-data-table-header__icon, .theme--light.m-data-table .m-data-table-header th.sortable:hover {
    color: inherit;
}

.theme--light.m-data-table .m-data-table__empty-wrapper {
    color: inherit;
}

.theme--light.m-data-table > .m-data-table__wrapper > table > tbody > tr:hover:not(.m-data-table__expanded__content):not(.m-data-table__empty-wrapper) {
    background-color: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}
/*步骤条*/
.theme--light.m-stepper .m-stepper__label {
    color: inherit;
}

.theme--light.m-stepper .m-stepper__step:not(.m-stepper__step--active):not(.m-stepper__step--complete):not(.m-stepper__step--error) .m-stepper__step__step {
    background-color: var(--md-sys-color-surface-1);
}
/*底部导航栏激活样式*/
.nav-bottom-tab-active {
    color: var(--md-sys-color-primary) !important;
}

.theme--light.m-bottom-navigation .m-btn:not(.m-btn--active) {
    color: var(--md-sys-color-secondary) !important;
}

.theme--light.m-bottom-navigation {
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-primary) !important;
}
/*icon按钮*/
.theme--light.m-btn.m-btn--icon {
    color: inherit;
}

.theme--light.m-btn {
    color: inherit;
}

/*侧边导航栏*/

.theme--light.m-navigation-drawer .m-navigation-drawer__content {
    background-color: var(--md-sys-color-surface-1);
}

/*溢出的tab栏*/
.m-tabs:not(.cngal-main-tab-card) .m-slide-group__wrapper {
    border-radius: var(--md-card-border-radius) !important;
}

.m-tabs:not(.cngal-main-tab-card) .m-slide-group__content {
    border-radius: var(--md-card-border-radius) !important;
}

.cngal-main-tab-card .m-toolbar__content, .m-tabs {
    background-color: transparent;
}
/*扩展卡片*/
.theme--light.m-expansion-panels .m-expansion-panel {
    background-color: var(--md-sys-color-surface-1);
    color: var(--md-sys-color-on-surface);
}

.m-expansion-panels:not(.m-expansion-panels--accordion):not(.m-expansion-panels--tile) > .m-expansion-panel--active {
    border-radius: var(--md-card-border-radius);
}

.m-expansion-panels {
    border-radius: var(--md-card-border-radius);
    padding-bottom: 1rem;
}
/*树状列表*/
.theme--light.m-treeview {
    color: inherit;
}
/*背景透明*/
.m-main__wrap {
    background-color: transparent;
}
/*错误按钮*/
.m-btn:not(.m-btn--outlined).error {
    color: var(--md-sys-color-on-error);
}
/*下拉框*/
.m-select__selection--comma {
    overflow: inherit;
}
/*相册*/
.m-card > :first-child:not(.m-btn):not(.m-chip):not(.m-avatar) {
    border-radius: var(--md-card-border-radius) !important;
}
/*tab标签*/
.m-window-item {
    padding: 3px;
}
/*列表*/
.theme--light.m-list {
    background-color: inherit;
    color: inherit;
}
/*图标按钮*/
.m-btn--fab {
    display: flex;
    justify-content: center;
}
/*tab栏*/
.theme--light.m-sheet {
    color: inherit;
}

.m-toolbar {
    transition: none;
}

.m-tab--active, .m-tab--active .m-btn.m-btn--flat, .m-tab--active .m-icon, .m-tab.m-tab {
    color: inherit;
}

/*卡片*/
.md-card {
    display: flex;
    border-radius: var( --md-card-border-radius);
    transition: .3s;
    white-space: normal;
    flex-direction: column;
}
    /*primary颜色*/
    .md-card.color-primary {
        background-color: var(--md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container) !important;
    }

    .md-card.show-hover-style.color-primary:hover {
        background-color: var( --md-sys-color-tertiary-container);
        color: var(--md-sys-color-on-tertiary-container) !important;
    }

    /*surface颜色*/
    .md-card.color-surface {
        background-color: var(--md-sys-color-surface-1);
        color: var( --md-sys-color-on-surface) !important;
    }

    .md-card.show-hover-style.color-surface:hover {
        background-color: var( --md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container) !important;
    }

    /*tertiary颜色*/
    .md-card.color-tertiary {
        background-color: var(--md-sys-color-tertiary-container);
        color: var(--md-sys-color-on-tertiary-container) !important;
    }

    .md-card.show-hover-style.color-tertiary:hover {
        background-color: var( --md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container) !important;
    }
    /*background颜色*/
    .md-card.color-background {
        background-color: var(--md-sys-color-background);
        color: var(--md-sys-color-on-background) !important;
        box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12) !important;
    }

    .md-card.show-hover-style.color-background:hover {
        background-color: var( --md-sys-color-primary-container);
        color: var(--md-sys-color-on-primary-container) !important;
    }

    .md-card.show-hover-style:active {
        border-radius: var( --md-card-active-border-radius);
    }

    .md-card img, .md-card .image {
        transition: .3s;
        border-radius: var( --md-card-border-radius);
        height: min-content;
    }

    .md-card.show-hover-style:active img, .md-card.show-hover-style:active .image {
        border-radius: var( --md-card-active-border-radius);
    }


/*正在加载*/
.progressing-card {
    display: flex;
    justify-content: center;
}

    .progressing-card .out-card {
        align-items: center;
    }

    .progressing-card .inner-card {
        display: flex;
        max-width: 400px;
        width: 100%;
        flex-direction: column;
        padding: 1rem;
        align-items: center;
    }

    .progressing-card img {
        width: 70%;
        margin-bottom: 1rem;
    }
/*找不到*/
.not-found-card {
    display: flex;
    justify-content: center;
}

    .not-found-card .out-card {
        align-items: center;
    }

    .not-found-card .inner-card {
        display: flex;
        max-width: 400px;
        width: 100%;
        flex-direction: column;
        padding: 1rem;
        align-items: center;
    }

    .not-found-card img {
        width: 70%;
        margin-bottom: .5rem;
    }
/*颜色选择器*/
.color-selector-card {
    background-color: transparent !important;
}

/*包含标题的卡片*/
.title-container-card {
    display: flex;
    flex-direction: column;
}

    .title-container-card .title-card {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

        .title-container-card .title-card h2 {
            display: flex;
        }

        .title-container-card .title-card i {
            color: var(--md-sys-color-primary);
        }

    .title-container-card .content-card {
        display: flex;
        flex-direction: column;
    }
/*大图预览*/
.largeimage-bg {
    width: 100%;
    height: calc(100vh);
    background-color: rgba(0,0,0,.7);
    position: fixed;
    z-index: 1050;
}



.largeimage-layout {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.largeimage-btn-close {
    position: fixed;
    right: 1rem;
    top: 1rem;
}

.largeimage-layout-in {
    height: 100%;
    width: 100%;
    justify-content: center;
}

.largeimage-btn-left {
    position: fixed;
    left: 1rem;
    top: 50%;
    bottom: 50%;
    transform: translate(0, -50%);
}

.largeimage-btn-right {
    position: fixed;
    right: 1rem;
    top: 50%;
    bottom: 50%;
    transform: translate(0, -50%);
}

.largeimage-img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    /*height: fit-content;*/
    align-self: center;
}

.largeimage-a {
    max-height: calc(100% - 100px);
    display: flex;
    align-content: center;
    justify-content: center;
}

.largeimage-layout-img {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/*图片裁剪*/
.image-cropper-card img {
    transition: none !important;
    height: 100% !important;
}
/*滚动卡片组*/
.slide-group {
    display: flex;
    width: 100%;
    overflow: scroll;
    padding: 3px;
    gap: 1rem;
}

.slide-group::-webkit-scrollbar {
        display: none; /* Chrome Safari */
    }

.slide-item {
    display: flex;
}
